<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen"/>
    <title>装备对比</title>
    <link rel="stylesheet" href="/static/css/main.css"/>
</head>
<body>

<!--contianer-->
<section class="det-container">
    <div class="r-table">
        <!--商品信息-->
        <ul class="r-shoe-info">
            <li><div class="v-middle"><div>商品信息</div></div></li>
            <li>
                <div class="r-shoe-cell">
                    <img src="{$compare[0]['gear']["images"][0]}"/>
                    <i style="background:#95c4e5;"></i>
                </div>
                    <p>{$compare[0]['gear']["name"]}</p>

            </li>
            <li>
                <div class="r-shoe-cell">
                    <img src="{$compare[1]['gear']["images"][0]}"/>
                    <i style="background:#ff8370;"></i>
                </div>

                <p>{$compare[1]['gear']["name"]}</p>
            </li>
        </ul>
        <!--综合评分-->
        <ul>
            <li>综合评分</li>
            <li><span class="r_star r_star_mini j_star_first" data-score="{$compare[0]['gear']["score"]}"><em></em></span>{$compare[0]['gear']["score"]}</li>
            <li><span class="r_star r_star_mini j_star_second" data-score="{$compare[1]['gear']["score"]}"><em></em></span>{$compare[1]['gear']["score"]}</li>
        </ul>
        <!--官方售价-->
        <ul class="r-table-score">
            <li>官方售价</li>
            <li class="r-price">{eval echo $compare[0]['gear']['currency']?'$':'￥' } {$compare[0]['gear']['price']}</li>
            <li class="r-price">{eval echo $compare[1]['gear']['currency']?'$':'￥' } {$compare[1]['gear']['price']}</li>
        </ul>
        <!--性能图-->
        <ul>
            <li><div class="v-middle"><div>性能图</div></div></li>
            <li style="width:78%;">
                <div id="main" style="height:180px;"></div>
            </li>
        </ul>
        <!--尺码感受-->
        <ul>
            <li><div class="v-middle"><div>尺码感受</div></div></li>
            <li style="width:78%;padding:10px 0;">
                <p class="r-d-rule">
                    <i class="arrow-red j_arr_red" data-score='{$compare[0]["gear"]["sizefeel"]}'></i>
                    <i class="arrow-blue j_arr_blue" data-score='{$compare[1]["gear"]["sizefeel"]}'></i>
                    <img src="/static/images/r_rule.png"/>
                </p>
            </li>
        </ul>
        <!--性别-->
        <ul>
            <li>性别</li>
            <li>{$compare[0]['attrs']['gender']}</li>
            <li>{$compare[1]['attrs']['gender']}</li>
        </ul>
        <!--类别-->
        <ul>
            <li>类别</li>
            <li>{$compare[0]['attrs']['shoeCat']}</li>
            <li>{$compare[1]['attrs']['shoeCat']}</li>
        </ul>
        <!--足型-->
        <ul>
            <li>足型</li>
            <li>{$compare[0]['attrs']['footType']}</li>
            <li>{$compare[1]['attrs']['footType']}</li>
        </ul>
        <!--适合足类-->
        <ul>
            <li>适合足类</li>
            <li>{$compare[0]['attrs']['footCircle']}</li>
            <li>{$compare[1]['attrs']['footCircle']}</li>
        </ul>
        <!--功能-->
        <ul>
            <li>功能</li>
            <li>{$compare[0]['attrs']['feature']}</li>
            <li>{$compare[1]['attrs']['feature']}</li>
        </ul>
        <!--重量-->
        <ul>
            <li>重量</li>
            <li>{$compare[0]['attrs']['weight']}</li>
            <li>{$compare[1]['attrs']['weight']}</li>
        </ul>
        <!--上市日期-->
        <ul>
            <li>上市日期</li>
            <li>{$compare[0]['attrs']['publishTime']}</li>
            <li>{$compare[1]['attrs']['publishTime']}</li>
        </ul>
    </div>
</section>


<script src="/static/js/zepto.min.js"></script>
<script src="/static/js/echarts.js"></script>
<script>
    var j_star_first = $('.j_star_first'),
        j_star_second = $('.j_star_second'),

        j_arr_red = $('.j_arr_red'),
        j_arr_blue = $('.j_arr_blue'),

        score_first = j_star_first.attr('data-score'),
        score_second = j_star_second.attr('data-score'),

        arr_red = j_arr_red.attr('data-score'),
        arr_blue = j_arr_blue.attr('data-score'),

        score_base = 5,
         shoe_base = 100;

    var score_last_first = 85*(score_first/score_base)+'px';
    var score_last_second = 85*(score_second/score_base)+'px';

    var shoe_score_red = 95*(arr_red/shoe_base)+'%';
    var shoe_score_blue = 95*(arr_blue/shoe_base)+'%';

    j_star_first.find('em').css('width',score_last_first);
    j_star_second.find('em').css('width',score_last_second);
    j_arr_red.css('left',shoe_score_red);
    j_arr_blue.css('left',shoe_score_blue);

</script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        polar: [
            {
                indicator: [
                    {text: '耐久性', max: 5},
                    {text: '抓地性', max: 5},
                    {text: '灵活性', max: 5},
                    {text: '舒适度', max: 5},
                    {text: '避震型', max: 5},
                    {text: '轻量化', max: 5}
                ],
                radius: 70,
                type: 'circle',
                startAngle: 180
            }
        ],
        series: [
            {
                name: '鞋子数据',
                type: 'radar',
                data: [
                    {
                        value:  [{$compare[0]['gear']['durablility']},{$compare[0]['gear']['griplity']},{$compare[0]['gear']['fiexibility']},{$compare[0]['gear']['comfort']},{$compare[0]['gear']['shocklessen']},{$compare[0]['gear']['lighty']}],
                        name: '1',
                        itemStyle: {
                            normal: {
                                color: '#95c4e5'
                            }
                        }
                    },
                    {
                        value:  [{$compare[1]['gear']['durablility']},{$compare[1]['gear']['griplity']},{$compare[1]['gear']['fiexibility']},{$compare[1]['gear']['comfort']},{$compare[1]['gear']['shocklessen']},{$compare[1]['gear']['lighty']}],
                        name: '2',
                        itemStyle: {
                            normal: {
                                color: '#ff8370'
                            }
                        }
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);

</script>


</body>
{template 'show/web-footer'}